<template>
	<view class="detailContainer">
		<view class="header">
			<view class="countBox">
				<text class="currentNum">1</text> 
				<text class="sumNum">/3</text>
			</view>
			<swiper  class="detailSwiper" 	  :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image  class="detailSwiperImg" :src="goodsInfo.imgUrl" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image  class="detailSwiperImg" :src="goodsInfo.imgUrl" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image  class="detailSwiperImg" :src="goodsInfo.imgUrl" mode=""></image>
					</view>
				</swiper-item>
				
			</swiper>
				
		</view>
		
		<view class="shopName">
			<text class="hotShop">爆款</text>
			<text class="hotText">{{goodsInfo.goodsName}}</text>
		</view>
		<view class="shopPrice">
			<text class="priceText">￥{{goodsInfo.originalPrice}}</text>
		</view>
		
		<view class="crossLine"></view>
		 
		<view class="postMessage">
			<view class="shippingMethod">
				<text class="sendMethod">配送方式</text>
				<text class="distributions">物流配送，包邮</text>
			</view> 
			<view class="send">
				<text class="sendTo">送至</text>
				<text class="sendArea">河北省 保定市 徐水区</text>
				<text class="gl">></text>
			</view>
		</view>
		
		<view class="crossLine"></view>
		 
		<view class="goodEvaluate">
			<text class="evaluateText">商品评价</text>
			<text class="evaluateNum">(120)</text>
			<text class="bottomGl">></text>
		</view>
		
		<!-- 底部固定内容 -->
		<view class="bottomWrap">
			<view class="kefu"> 
				<image class="kefuImg" src="../../static/icon/erji.png" mode=""></image>
				<text class="kefuText">客服</text>
			</view>
			<view class="gouwucarWrap" > 
				<image class="gouwuImg" src="../../static/icon/goodscart.png" mode=""></image>
				<text class="gouwuText" >购物车</text>
				<text class="gouwuNum">{{num || count}}</text>
			</view> 
			<button class="addCart" type="default" @click="changeNum">加入购物车</button>
			<button  class="rightawayBuy" type="default" @click="toBuycar">前往购物车</button>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				goodsInfo:{},
				count:0
			}
		},
		mounted(){
			
		},
		onLoad(options){
			this.goodsInfo = JSON.parse(options.goodsInfo)
		},
		methods: {
			// 点击'购物车图标'去buycar页面
			toBuycar(){
				if(this.num === 0){
					wx.showToast({
					  title: '请加入购物车',
					  icon: 'error',
					  duration: 2000,
					})
					return
				}
				// console.log('cartList',this.cartList);
				// console.log('goodsInfo',this.goodsInfo);
				//点击添加购物车
				//首先要判断购物车列表当中是否存在当前这个商品相关的购物车数据
				//如果有，直接修改数量
				//如果没有，需要把当前这个详情页商品数据变成购物车数据，添加到购物车列表
				let  index = this.cartList.findIndex(item=>item.goodsId === this.goodsInfo.goodsId)
				if(index !== -1){
					console.log(this.num)
					this.cartList[index].goodsNum = this.num
					this.cartList[index].isChecked = true
				}else{
					let obj = this.goodsInfo
					this.$set(obj,'isChecked',true)
					this.$set(obj,'goodsNum',this.count)
					this.cartList.push(obj)
				}
				// console.log('详情页',this.cartList);
				//跳转到购物车carbuy页面
				wx.reLaunch({
					url:'/pages/buycar/buycar'
					
				})
			},
			//点击加入购物车
			changeNum(){
				this.num++
				if(!this.num){
					this.count++
				}
			}
		},
		computed:{
			...mapState({
				cartList:state=>state.buycar.cartList
			}),
			num:{
				get(){
					return this.cartList[this.cartList.findIndex(item=>item.goodsId === this.goodsInfo.goodsId)]?.goodsNum
					
				},
				set(newValue){
					// console.log(newValue)
					(this.cartList.find(item=>item.goodsId === this.goodsInfo.goodsId) || []).goodsNum = newValue
					
				}
			}
		}
	}
</script>

<style lang="stylus">
	.detailContainer 
		height 100%
		.header
			width 100%
			position relative
			.countBox
				position absolute
				right 30rpx
				bottom 30rpx
				z-index 999
				width 84rpx
				height 40rpx
				background-color rgba(0,0,0,.3)
				line-height 40rpx
				text-align center
				border-radius 20rpx
				.currentNum 
					font-size 28rpx
					color #fff
				.sumNum
					font-size 28rpx
					color #fff
			.detailSwiper
				width 100%
				height 750rpx
				.detailSwiperImg
					width 100%
					height 750rpx
		.shopName 
			width 686rpx
			height 48rpx
			margin-left 32rpx
			margin-top 30rpx
			margin-bottom 16rpx
			.hotShop
				width 64rpx
				height 38rpx
				background linear-gradient(90deg,#e02b33,#fb6a66)
				font-size 28rpx
				padding 5rpx
				color #fff
				border-radius 0 15rpx 0 15rpx
			.hotText
				font-size 32rpx
				font-weight 600
		.shopPrice	
			width 70rpx
			height 42rpx
			margin-left 32rpx
			margin-bottom 28rpx
			.priceText
				font-size 42rpx
				color #000
		.crossLine	
			width 100%
			height 20rpx
			background-color #F4F4F4
		.postMessage
			width 100%
			height 208rpx
			display flex
			flex-direction column
			justify-content space-around
			align-items center
			.shippingMethod
				width 686rpx
				height 48rpx
				line-height  48rpx
				.sendMethod 
					font-size 28rpx
					color #999
					margin-right 40rpx
				.distributions
					font-size 26rpx
			.send
				width 686rpx
				height 48rpx
				.sendTo  
					font-size 28rpx
					color #999
					margin-right 90rpx
				.sendArea
					font-size 26rpx
					margin-right 270rpx
				.gl
					font-size 26rpx
					color #999
		.goodEvaluate   
			width 100%
			height 104rpx
			line-height 104rpx
			padding-left 32rpx
			box-sizing border-box
			.evaluateText	
				font-size 28rpx
				font-weight 700
				color #333
			.evaluateNum
				font-size 24rpx
				color #a9abad
				margin-right 500rpx
			.bottomGl
				font-size 26rpx
				color #999
		.bottomWrap	
			width 730rpx
			height 100rpx
			margin 0 auto
			display flex
			justify-content space-between
			align-items center
			.kefu  
				width 88rpx
				height 84rpx
				display flex
				flex-direction column
				justify-content center
				.kefuImg
					width 48rpx
					height 48rpx
				.kefuText
					font-size 24rpx
					color #666
			.gouwucarWrap  
				width 88rpx
				height 84rpx
				display flex
				flex-direction column
				justify-content center
				position relative
				.gouwuImg
					width 48rpx
					height 48rpx
				.gouwuText
					font-size 24rpx
					color #666
				.gouwuNum
					width 32rpx
					height 32rpx
					line-height 32rpx
					text-align center
					display block
					background-color #f05757
					color #FFF
					font-size 24rpx
					box-sizing border-box
					border-radius 50%
					position absolute
					right 12rpx
					top 0
			.addCart 
				width 200rpx
				height 56rpx
				line-height 56rpx
				text-align center
				box-sizing border-box
				border-radius 50rpx 50rpx 50rpx 50rpx
				font-size 28rpx
				color #353333
				border 1rpx solid #2d2d2d
			.rightawayBuy
				width 200rpx
				height 56rpx
				line-height 56rpx
				text-align center
				box-sizing border-box
				border-radius 50rpx 50rpx 50rpx 50rpx
				font-size 28rpx
				color #fff
				background-color #000
				
				
</style>	
